<!-- 人员树 -->
<template>
  <div id="userstree">

    <el-tree ref="tree1" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
      :default-checked-keys="checkdata" :props="defaultProps" :check-strictly="true" @check-change="handleCheckChange">
    </el-tree>
  </div>
</template>

<script>
  export default {
    name: "userstree",
    props: ['upuserobj'],
    data() {
      return {
        checkdata: [],
        data: [{
          id: 1,
          label: '村长',
          children: [{
            id: 4,
            label: '大儿子',
            children: [{
              id: 9,
              label: '大傻子'
            }, {
              id: 10,
              label: '二孙子'
            }]
          }]
        }, {
          id: 2,
          label: '大哥',
          children: [{
            id: 5,
            label: '老王'
          }, {
            id: 6,
            label: '老张'
          }]
        }, {
          id: 3,
          label: '一级 3',
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }

      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) { //点击树的复选框调用
        this.upuserobj(data, checked); //调用属性，调用父组件传过来的函数

        if (checked) {
          this.checkdata.push(data.id)
        } else {
          for (var i = 0; i < this.checkdata.length; i++) {
            if (this.checkdata[i] == data.id) {
              this.checkdata.splice(i, 1)
              break
            }
          }
        }
      },
      upcheckdata(value) { //删除树选中(由父组件调用)
        this.checkdata.splice(this.checkdata.indexOf(value), 1)
        this.$refs.tree1.setCheckedKeys(this.checkdata);

      }
    }
  }
</script>

<style>
</style>
